<template>
  <div class="top">
    <div class="login">
      <router-link to="/adduser">
        <span v-if="hidzc">注册</span>
      </router-link>
      <router-link to="/login">
        <span class="logon-name" @mouseenter="showCon=true" >{{ username }} <i class="el-icon-arrow-down"/> </span>
      </router-link>
      <div v-if="showCon&&!hidzc" class="login-con" @mouseleave="showCon=false" >
        <ul>
          <router-link to="/personal">
            <li>个人中心</li>
          </router-link>
          <li @click="logout">退出登录</li>
        </ul>
      </div>
    </div>
    <div class="topCon">
      <div class="topCon-left">
        <span>校友问答</span>
      </div>
      <div class="topCon-main">
        <el-input id="find" v-model="seachVal" :value="seachVal" :disabled="find" placeholder="请提问前先看搜索，看那些问题已经提问过。">
          <template slot="append" class="seach">
            <span @click="abtn()">查询</span>
          </template>
        </el-input>
      </div>
      <div class="topCon-right">
        <router-link to="/add">
          <div class="ask_askhelp_btn">
            <div class="add-question" rel="nofollow" ><span>＋</span>我要提问</div>
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Top',
  data() {
    return {
      seachVal: '',
      username: '',
      hidzc: true,
      showCon: false,
      find: false
    }
  },
  created: function() {
    const nowUrl = window.location.href
    if (nowUrl === 'http://localhost:9528/#/seachlist') {
      this.find = false
    } else {
      this.find = true
    }
    const token = this.$store.state.user.name
    if (token) {
      this.username = token
      this.hidzc = false
    } else {
      this.username = '未登录'
      this.hidzc = true
    }
  },
  methods: {
    logout() {
      this.$store.dispatch('LogOut').then(() => {
        location.reload() // 为了重新实例化vue-router对象 避免bug
      }).catch((err) => {
        console.log(err)
      })
    },
    abtn() {
      if (!this.seachVal) {
        this.$router.push({
          path: '/seachlist'
        })
      }
      this.$emit('listeEVent', this.seachVal)
    },
    getPath() {
      console.log(this.$route.path)
      if (this.$route.path === '/seachlist') {
        this.find = true
      } else {
        this.find = false
      }
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss">
.top {
  width: 100%;
  height: 120px;
  font-size: 14px;
  position: fixed;
  background: #fff;
  top: 0;
  left: 0;
  box-sizing: border-box;
  z-index: 9999;
  .login {
    width: 100%;
    height: 30px;
    line-height: 30px;
    right: 20px;
    background: #323232;
    color: #fff;
    span {
      float: right;
      margin-right: 20px;
      margin-left: 10px;
    }
    .login-con {
      position: absolute;
      right: 20px;
      top: 29px;
      position: absolute;
      z-index: 200;
      background: #FFF;
      border-radius: 4px;
      color: #323232;
      box-shadow: 0 0 3px rgba(0,0,0,.1);
      &::before {
        content: '';
        width: 0;
        height: 0;
        border-width: 0 5px 9px;
        border-style: solid;
        border-color: transparent transparent #cccc;
        position: absolute;
        top: -8px;
        left: 32px;
      }
      ul {
        margin: 0;
        padding: 10px;
        li {
          list-style: none;
          cursor: pointer;
          border-radius: 4px;
          &:hover {
            background-color: #28b76c;
          }
        }
      }
    }
  }
  .topCon {
    width: 1160px;
    text-align: center;
    background-size: 1440px auto;
    margin: 0 auto;
    height: 90px;
    line-height: 90px;
    align-items: center;
    box-sizing: border-box;
    .topCon-left {
      font-size: 18px;
      float: left;
    }
    .topCon-main {
      width: 650px;
      float: left;
      margin-left: 50px;
      .el-input-group__append {
        cursor: pointer;
      }
    }
    .topCon-right {
      width: 150px;
      float: right;
      margin-top: 20px;
      margin-right: 220px;
      .ask_askhelp_btn {
        font-size: 16px;
        line-height: 43px;
      }
      .add-question {
        background: #41C074;
        color: #fff;
        border-radius: 0;
        box-shadow: none;
        height: 40px;
        margin-top: 4px;
        line-height: 40px;
        font-size: 14px;
        padding: 0 10px;
        cursor: pointer;
      }
    }
  }
}
</style>
